<template>
    <div>
            <!-- 
                el-menu
                default-active	当前激活菜单的 index
                 background-color 菜单的背景色（仅支持 hex 格式）
                 text-color 菜单的文字颜色（仅支持 hex 格式）
                 active-text-color 当前激活菜单的文字颜色（仅支持 hex 格式）
                 unique-opened	是否只保持一个子菜单的展开
                 router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
             -->
        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" unique-opened router>
            <el-menu-item index="/home">
                <i class="el-icon-s-flag"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu :index="item.id.toString()" v-for="item in $store.getters.getUser.menus" :key="item.id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item v-for="menu in item.children" :key="menu.id" :index="menu.url">{{menu.title}}</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultActive:''
        };
    },
    mounted(){
        this.defaultActive = this.$route.path
 console.log(this.$store.getters.getUser);
    }
};
</script>

<style scoped>
.el-menu {
    min-height: 517px;
}
</style>
